<template>
    <div class="relate">
        <Row
                type="flex"
                justify="center"
                align="middle"
                @keydown.enter.native="checkVaptcha"
                style="height: 100%">
            <Col class="layout">
                <div>
                    <Header/>
                    <Row v-if="!relateLoading">
                        <Tabs value="1">
                            <TabPane :label="$t('relateTitle')" name="1" icon="md-person-add">
                                <Form
                                        ref="relateLoginForm"
                                        :model="form"
                                        :rules="rules"
                                        class="form">
                                    <FormItem prop="username">
                                        <Input
                                                v-model="form.username"
                                                prefix="ios-contact"
                                                size="large"
                                                clearable
                                                placeholder="请输入登录账号"
                                                autocomplete="off"
                                        />
                                    </FormItem>
                                    <FormItem prop="password">
                                        <Input
                                                type="password"
                                                v-model="form.password"
                                                prefix="ios-lock"
                                                size="large"
                                                clearable
                                                placeholder="请输入密码"
                                                autocomplete="off"
                                        />
                                    </FormItem>
                                </Form>
                            </TabPane>
                        </Tabs>
                        <Row>
                            <Button
                                    type="primary"
                                    size="large"
                                    :loading="loading"
                                    @click="checkVaptcha"
                                    long>
                                <span v-if="!loading">{{ $t("relate") }}</span>
                                <span v-else>{{ $t("relating") }}</span>
                            </Button>
                        </Row>
                        <Row type="flex" justify="space-between" class="other-thing">
                            <router-link to="/reset" class="back">{{
                                $t("forgetPass")
                                }}
                            </router-link>
                            <router-link to="/register" class="back">
                                {{ $t("registerNow") }}
                            </router-link>
                        </Row>
                    </Row>
                    <div v-if="relateLoading">
                        <RectLoading/>
                    </div>
                </div>
                <Footer/>
            </Col>
            <LangSwitch/>
        </Row>
    </div>
</template>

<script>
    import Cookies from "js-cookie";
    import util from "@/libs/util.js";
    import Header from "@/views/main-components/header";
    import Footer from "@/views/main-components/footer";
    import LangSwitch from "@/views/main-components/lang-switch";
    import RectLoading from "@/views/my-components/mrdeer/rect-loading";

    let vaptchaObject;
    export default {
        components: {
            LangSwitch,
            Header,
            Footer,
            RectLoading,
        },
        data() {
            return {
                relateLoading: true,
                loadingVaptcha: true,
                loading: false,
                verified: false,
                form: {
                    isLogin: false,
                    username: "",
                    password: "",
                    socialType: null,
                    id: "",
                    token: "",
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: "账号不能为空",
                            trigger: "change",
                        },
                    ],
                    password: [
                        {
                            required: true,
                            message: "密码不能为空",
                            trigger: "change",
                        },
                    ],
                },
            };
        },
        methods: {
            submitRelate() {
                this.$refs.relateLoginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.form.isLogin = false;
                        relate(this.form).then((res) => {
                            if (res.status==200) {
                                // 获取JWT
                                getJWT({JWTKey: res.result}).then((res) => {
                                    if (res.status==200) {
                                        this.$Message.success("绑定成功");
                                        let token = res.result;
                                        this.setStore("token", token);
                                        getOtherSet().then((res) => {
                                            if (res.result) {
                                                let domain = res.result.ssoDomain;
                                                Cookies.set("token", token, {
                                                    domain: domain,
                                                    expires: 7,
                                                });
                                            }
                                        });
                                        // 获取用户信息
                                        userInfo().then((res) => {
                                            if (res.status==200) {
                                                // 避免超过大小限制
                                                delete res.result.permissions;
                                                let roles = [];
                                                res.result.roles.forEach((e) => {
                                                    roles.push(e.name);
                                                });
                                                delete res.result.roles;
                                                this.setStore("roles", roles);
                                                // 保存7天
                                                Cookies.set("userInfo", JSON.stringify(res.result), {
                                                    expires: 7,
                                                });
                                                this.setStore("userInfo", res.result);
                                                this.$store.commit("setAvatarPath", res.result.avatar);
                                                // 加载菜单
                                                util.initRouter(this);
                                                this.$router.push({
                                                    name: "home_index",
                                                });
                                            } else {
                                                this.loading = false;
                                            }
                                        });
                                    } else {
                                        this.loading = false;
                                    }
                                });
                            } else {
                                this.loading = false;
                                vaptchaObject.reset();
                            }
                        });
                    }
                });
            },
            relateDirect() {
                // 已登录 直接绑定
                this.form.isLogin = true;
                relate(this.form).then((res) => {
                    if (res.status==200) {
                        this.$Message.success("绑定成功");
                    }
                    // 返回个人中心
                    this.$router.push({
                        name: "ownspace_index",
                        query: {
                            type: "social",
                        },
                    });
                });
            },
            initVaptcha() {
                let that = this;
                vaptcha({
                    //配置参数
                    vid: vaptchaID, // 验证单元id
                    type: "invisible", // 展现类型 隐藏式
                    offline_server: vaptchaOffline, // 离线验证接口地址 可选但此处不能为空
                }).then(function (vaptchaObj) {
                    vaptchaObject = vaptchaObj;
                    let userInfo = Cookies.get("userInfo");
                    if (userInfo) {
                        vaptchaObject.validate(); // 开始验证
                    }
                    vaptchaObj.listen("pass", function () {
                        that.form.token = vaptchaObj.getToken();
                        // 验证成功 发送绑定请求
                        if (userInfo) {
                            // 直接绑定
                            that.relateDirect();
                        } else {
                            // 未登录填写表单绑定
                            that.submitRelate();
                        }
                    });
                });
            },
            checkVaptcha() {
                this.$refs.relateLoginForm.validate((valid) => {
                    if (valid) {
                        vaptchaObject.validate(); // 若没验证验证码 开始验证
                    }
                });
            },
        },
        mounted() {
            let q = this.$route.query;
            this.form.socialType = q.socialType;
            this.form.id = q.id;
            // 加载验证码
            this.initVaptcha();
            let userInfo = Cookies.get("userInfo");
            if (!userInfo) {
                this.relateLoading = false;
            }
        },
    };
</script>

<style lang="less">
    @import "./styles/relate.less";
</style>
